<template>
  <div id="app">
    <div class="login-container">
      <div class="left">
        <div class="title-box">
          <img src="@/assets/img/kanshangLOGO.png" alt="" />
          <span class="title"><span class="logo">看商</span>后台管理系统</span>
        </div>
        <!--
          mdoel:绑定模型，他这个里面的属性，根据业务逻辑来
          rules：校验规则
          ref：拿到当前的el-for表单的值
          validate：全局验证
         -->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" validate style="margin-top: 29px">
          <!-- 输入管理员账号 -->
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" v-model="ruleForm.username" placeholder="请输入管理员账号" @keyup.enter.native="login"></el-input>
          </el-form-item>
          <!--
            输入密码验证
            show-password：显示或隐藏密码
           -->
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="ruleForm.password" placeholder="请输入密码" @keyup.enter.native="login" show-password></el-input>
          </el-form-item>

          <el-form-item prop="checked">
            <el-checkbox v-model="ruleForm.checked"></el-checkbox>
            我已阅读并同意
            <el-link type="primary" href="http://www.baidu.com" target="_blank">用户协议</el-link>和
            <el-link type="primary" href="http://www.jd.com" target="_blank">隐私条款</el-link>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="dialogFormVisible">
              <i class="el-icon-refresh"></i>
              重 置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
// import {saveToken} from '@/utils/token'
// 导入子组件
// import register from "./Register";
export default {
  // 声明一个变量，方便浏览器测试时调用
  name: 'Login',
  // 注册子组件
  // components: {
  //   register,
  // },
  data () {
    return {
      loginCaptcha: `${process.env.VUE_APP_BASEURL}/captcha?type=login`,
      ruleForm: {
        username: 'admin',
        password: '12345678', // 密码
        checked: true // 默认选中
      },

      // 校验规则
      rules: {
        username: [
          {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
          }
        ],
        checked: [
          {
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error('必须勾选用户协议'))
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 给登录按钮设置点击事件，$refs获取dom的值
    // validate 清空表单的值和规则
    // async和await是成对的 它可以使代码转换成异步来代码执行
    login () {
      // this.$refs.ruleForm.validate(async (valid) => {
      // if (!valid) return;
      // const res = await this.$axios.post("/login", this.ruleForm);
      // if (res.code == 200) {
      //   this.$message.success("登录成功");
      //   localStorage.setItem("heimamm-token", res.data.token);
      //   this.$router.push("../layout/index");
      // } else {
      //   this.$message({
      //     message: res.message,
      //     type: "error",
      //     duration: 1000,
      //   });
      // }
      // });
      if (this.ruleForm.username === '' || this.ruleForm.password === '') {
        this.$message('账号或密码不能为空！')
      } else {
        this.$message.success('登录成功')
        this.$router.push('../layout/home')
      }
    },
    // 点击重置按钮删除数据
    dialogFormVisible () {
      // console.log(this.ruleForm);
      this.ruleForm.username = ''
      this.ruleForm.password = ''
    }
  }
}
</script>
<style lang="less" scoped>
html,
body,
#app {
  height: 100%;
}
.login-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // background-image: url(../../assets/img/bg.jpg);
  // background-repeat: repeat-x;
  // background-size: 100%;
  background: url(../../assets/img/bg.jpg) repeat-x;
  .left {
    width: 478px;
    height: 500px;
    background: rgba(100, 30, 55, 0.4);
    padding: 48px;
    img {
      width: 60px;
      height: 60px;
      margin-right: 16px;
      margin-bottom: 7px;
    }
    .title {
      font-size: 24px;
      margin-right: 14px;
      .logo {
        font-size: 32px;
        font-weight: 600;
        color: #1e86db;
      }
    }
    .line {
      width: 1px;
      height: 20px;
      background: #c7c7c7;
      margin-right: 12px;
      display: inline-block;
    }
    .sub-title {
      font-size: 24px;
      margin-right: 14px;
    }
  }
}
</style>
